<template>
  <div>
    <div class="title_fonts">
      审核流程
    </div>
    <div class="table">
      <el-table :data="flowList" border style="width: 100%">
        <el-table-column prop="name" label="流程" />
        <el-table-column prop="isPass" label="操作">
          <template #default="scope">
            <div class="mb-2 flex items-center text-sm" v-if="parseInt(step)-1==scope.row.id&&isPassed=='0'">
            <el-radio-group v-model="scope.row.isPass" class="ml-4" :disabled="getBool(scope.row.id)">
              <el-radio label="1" size="large">完成</el-radio>
              <el-radio label="0" size="large">未通过</el-radio>
            </el-radio-group>
            <el-input class="input" v-if="index!=0&&scope.row.isPass=='0'&&scope.row.nosay" v-model="says" placeholder="请输入未通过原因" />
          </div>

          <div class="mb-2 flex items-center text-sm" v-if="parseInt(step)-1>scope.row.id">
            <el-radio-group v-model="passNum" class="ml-4" disabled>
              <el-radio label="1" size="large">完成</el-radio>
              <el-radio label="0" size="large">未通过</el-radio>
            </el-radio-group>
          </div>
          <div class="mb-2 flex items-center text-sm" v-if="parseInt(step)-1==scope.row.id&&isPassed=='2'">
            <el-radio-group v-model="nopassNum" class="ml-4" :disabled="getBool(scope.row.id)">
              <el-radio label="1" size="large">完成</el-radio>
              <el-radio label="0" size="large">未通过</el-radio>
            </el-radio-group>
            <el-input class="input" v-model="causeOfFailure" placeholder="请输入未通过原因" disabled />
          </div>

            <div class="mb-2 flex items-center text-sm" v-if="parseInt(step)-1==scope.row.id&&isPassed=='1'">
              <el-radio-group v-model="passNum" class="ml-4" :disabled="getBool(scope.row.id)">
                <el-radio label="1" size="large">完成</el-radio>
                <el-radio label="0" size="large">未通过</el-radio>
              </el-radio-group>
            </div>

          <div class="mb-2 flex items-center text-sm" v-if="parseInt(step)-1<scope.row.id">
            <el-radio-group v-model="scope.row.isPass" class="ml-4" disabled>
              <el-radio label="1" size="large">完成</el-radio>
              <el-radio label="0" size="large">未通过</el-radio>
            </el-radio-group>
          </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="money" v-if="applyState !=3">
      <div class="fl1 bg">实际放款金额</div>
      <input class="inputMoney fl1" v-model="money" oninput ="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入金额" />
    </div>

    <div class="Btn" v-if="applyState !=3">
      <div class="passBtn" @click="passFun">通过</div>
      <div class="passBtn nopass" @click="passFun1">驳回</div>
      <div class="passBtn loan" @click="lastLoad">结单</div>
    </div>

  </div>


</template>
<script lang="ts" setup>
import * as flow from '@/api/hutai/flow/index'
import { useRouter } from "vue-router";
import { ref , reactive } from 'vue';
import { ElMessage } from 'element-plus'

const route = useRoute();
const orderId = route.query.id
const money = ref('');
const step = ref('0')
const isPassed = ref('0')
const applyState = ref('0')
const causeOfFailure = ref('')
const says = ref('')
const passNum = ref('1')
const nopassNum = ref('0')
const disabled = ref(false)
const flowList = reactive([
  {id:0,name:'1.完善资料',isPass:null,nosay:false},
  {id:1,name:'2.下放额度',isPass:null,say:'',nosay:true},
  {id:2,name:'3.申请贷款',isPass:null,say:'',nosay:true},
  {id:3,name:'4.业务员处理',isPass:null,say:'',nosay:true},
  {id:4,name:'5.权证处理',isPass:null,say:'',nosay:true},
  {id:5,name:'6.资料审核',isPass:null,say:'',nosay:true},
  {id:6,name:'7.银行面签填贷款申请表',isPass:null,say:'',nosay:true},
  {id:7,name:'8.考察抵押物和经营场所',isPass:null,say:'',nosay:true},
  {id:8,name:'9.银行出批复',isPass:null,nosay:false},
  {id:9,name:'10.银行面签抵押合同和借款合同',isPass:null,say:'',nosay:true},
  {id:10,name:'11.办理抵押',isPass:null,say:'',nosay:true},
  {id:11,name:'12.办公证',isPass:null,say:'',nosay:true},
  {id:12,name:'13.放款',isPass:null,say:'',nosay:true},
])
/** 初始化 **/
onMounted(() => {
  getFlow()
})
const passFun = async() => {
  if(flowList[parseInt(step.value)-1].isPass=='1'){
    let parmas = {
        orderApplicationId: orderId,
        userId: '',
        flowN: parseInt(step.value),
        causeOfFailure: "",
        isFail: "0"
    }
    await flow.saveFlow(parmas).then( () => {
      ElMessage.success('操作成功')
      getFlow()
    })
  }else{
    ElMessage.error('请选择是否通过，未通过点击驳回！')
  }
}
const passFun1 = async() => {
  if(flowList[parseInt(step.value)-1].isPass=='0'&&says.value){
    let parmas = {
      orderApplicationId: orderId,
      userId: '',
      flowN: parseInt(step.value),
      causeOfFailure: says.value,
      isFail: "2"
  }
    await flow.saveFlow(parmas).then( () => {
      ElMessage.success('操作成功')
      getFlow()
      flowList[parseInt(step.value)-1].isPass==null
    })
  }else if(!flowList[parseInt(step.value)-1].isPass||!says.value){
    ElMessage.error('请选择和填写未通过缘由！')
  }
}
const lastLoad = async () => {
  if(step.value=='13'&&isPassed.value=='1'){
    let parmas = {
      orderId: orderId,
      realAmount: money.value
    }
    let isFinish = await flow.finish(parmas)
    if(isFinish){
      ElMessage.success('完成结单！')
      setTimeout(() => {
        push('/customers')
      }, 1000);
    }else{
      ElMessage.error('未完成结单！')
    }

  }else{
    ElMessage.error('未完成全部审核，暂无法结单！')
  }
}
const getBool = (id) => {
  if(id + 1 ==step.value&&isPassed.value=='0'){
    return false
  }else{
    return true
  }
}
const getFlow = async () => {
  const stepDetail = await flow.getFlowList(orderId)
  step.value = stepDetail[0].flowN
  isPassed.value = stepDetail[0].isFail
  applyState.value = stepDetail[0].applyState
  causeOfFailure.value = stepDetail[0].causeOfFailure
}

</script>
<style lang="scss">
.title_fonts{
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  font-size: 18px;
  font-weight: bold;
  color: black;
}

.table{
  width: calc(100% - 80px);
  padding: 40px;

  .input{
    width: 500px;
    margin-left: 50px;
  }
}

.money{
  display: flex;
  width: 60%;
  height: 63px;
  padding: 0 40px;
  justify-content: space-between;
  align-items: center;

  .bg{
    padding: 20px;
    background-color: #f7f7f7;
    border: 1px solid #ccc;
  }

  .inputMoney{
    height: 100%;
    padding: 0 20px;
    font-size: 16px;
    border: 1px solid #ccc;
  }

  .fl1{
    flex: 1;
  }
}

.Btn{
  display: flex;
  padding: 40px;

  .passBtn{
    width: 160px;
    margin-right: 20px;
    line-height: 44px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    background-color: #228bf9;
    border-radius: 10px;
  }

  .loan{
    background-color: rgb(7 201 7);;

  }

  .nopass{
    background-color: #f11d1d;
  }
}
</style>
